﻿import QtQuick 2.0

//显示蓝色文字，在单词分界处断行
//如果没有明确指定一个Text对象的高度和宽度，它将尝试去顶需要多少空间，并进行设置。
//除非设置了wrapMode,否则text为了适应文本的宽度，width会变得很大，可能超出父
//item的边界。
//如果你希望在有限的空间内显示一行长文本显示不下时，省略处理，则可以设置elide属性
Rectangle{

    width: 350;
    height: 400;

    Text {
        id:blueText
        width: 150;
        height: 100;
        wrapMode: Text.WordWrap; //自动换行

        font.bold:  true;
        font.pixelSize: 24;
        font.underline: true;

        text: qsTr("hello blue text");
//        anchors.centerIn:parent.top;
        anchors.top: parent.top
        color: "blue";
    }


    //rich_blue_text.qml
    Text{
        id: richtText
        width: 150;
        height: 100;
        wrapMode: Text.WordWrap;
        font.bold: true;
        font.pixelSize: 24;
        font.underline: true;
        text: "hello blue <font color=\"blue\">Text</font>";
//        anchors.centerIn: parent.bottom;
        anchors.top: blueText.bottom;
    }


    Text{
        id: normal;
        anchors.left: richtText.left;
        anchors.leftMargin: 20;
        anchors.top: richtText.bottom;
        anchors.topMargin: 20;
        font.pointSize: 24;
        text: qsTr("Normal Text:正常的");
    }

    Text{
        id: raised;
        anchors.left: normal.left;
        anchors.top: normal.bottom;
        anchors.topMargin: 4;
        font.pointSize: 24;
        text: qsTr("Raised Text:凸起的");
        style: Text.Raised;
        styleColor: "#AAAAAA";
    }

    Text{
        id: outLine;
        anchors.left: raised.left;
        anchors.top: raised.bottom;
        anchors.topMargin: 4;
        font.pointSize: 24;
        text: qsTr("outLine Text::轮廓的");
        style: Text.Outline;
        styleColor: "red";

    }

    Text {
        anchors.left: outLine.left;
        anchors.top: outLine.bottom;
        anchors.topMargin: 4;
        font.pointSize: 24;
        text: qsTr("SunKen text:凹陷的");
        style: Text.Sunken;
        styleColor: "#A00000";

    }
}
